<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<script type="text/javascript" src="../../../webjars/fw-web/main/common/vue-boot.js"></script>
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <style type="text/css">
        .el-dialog__body {
            padding: 10px 20px;
        }
        .el-main {
            padding: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    头部搜索和新增-->
    <template>
        <el-row :gutter="5">
            <el-col :span="24">
                <el-form :inline="true" ref="paramData" :model="paramData" size="small" @submit.native.prevent>
                    <el-form-item label="角色名称">
                        <el-input v-model="paramData.roleName" placeholder="请输入角色名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row :gutter="5">
            <el-col :span="24">
                <el-button type="primary" icon="el-icon-plus" @click="addRole" size="small">新增</el-button>
            </el-col>
        </el-row>
        <!--        角色信息表格-->
        <el-table v-loading="loading" :data="tableData" style="width: 100%" highlight-current-row
                  row-class-name="row_padding" header-row-class-name="head_padding" border>
            <el-table-column label="角色名称" prop="name" width="100" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="角色编码" prop="code" width="100" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="角色描述" prop="remark"  width="140" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="角色状态" prop="status" width="80" align="center">
                <!--switch开关，0表示有效，1表示无效-->
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.status===0?true:false"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="turnOnOff(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="角色类型" prop="type" width="100" align="center">
                <!--<template slot-scope="scope">
                    <span v-text="roleTypeRender(scope.row.type)"></span>
                </template>-->
            </el-table-column>
            <el-table-column label="操作人id" prop="editUserId" width="100" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作时间" prop="editTime" width="160" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作"  width="240">
                <!--               操作按钮-->
                <template slot-scope="scope" align="center">
                    <!--查看按钮-->
                    <el-button @click.native.prevent="openDetail(scope.row)"  icon="el-icon-search" circle size="small" style="margin-left: 20px">
                    </el-button>
                    <!--编辑按钮-->
                    <el-button  @click.native.prevent="editDetail(scope.row)" type="primary" icon="el-icon-edit" circle size="small" style="margin-left: 10px">
                    </el-button>
                    <!--删除按钮-->
                    <el-button @click.native.prevent="deleteRow(scope.row)" type="danger" icon="el-icon-delete" size="small" circle style="margin-left: 10px">
                    </el-button>
                    <!--分配权限-->
                    <el-button @click.native.prevent="openRoleMenu(scope.row)" type="success" icon="el-icon-check" size="small" circle style="margin-left: 10px">

                    </el-button>

                </template>
            </el-table-column>
        </el-table>

        <!--权限树-->
        <el-dialog title="角色权限" :visible.sync="dialogRoleMenuVisible" width="30%" top="40px" @close="addDialogClosed">
            <el-tree
                    ref="tree"
                    :data="menuTreeData"
                    ref="menuTree"
                    :props="treeProps"
                    default-expand-all
                    show-checkbox
                    node-key="id"
                    :default-checked-keys="checkTree">
            </el-tree>

            <el-button type="primary" icon="el-icon-check" @click="savePermission()" size="small">授权</el-button>


        </el-dialog>
        <!--分页栏-->
        <div style="text-align: right;margin-top: 8px;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paramData.current"
                    :page-sizes="[2, 10, 50, 100]"
                    :page-size="paramData.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paramData.totalRecord">
            </el-pagination>
        </div>
        <!--新增弹窗-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="handleDialogClose" fullscreen>
            <el-form ref="roleForm" :model="roleForm" :rules="roleFormRules" :label-width="formLabelWidth" :label-position="labelPosition">
                <el-form-item label="角色名称" prop="name" required>
                    <el-input v-model="roleForm.name" placeholder="请输入角色名称" style="width: 400px;" :maxlength="100" :disabled="formRead"></el-input>
                </el-form-item>
                <el-form-item label="角色编码" prop="code" required>
                    <el-input v-model="roleForm.code" placeholder="请输入角色编码" style="width: 400px;" :maxlength="30" :disabled="formRead"></el-input>
                </el-form-item>
                <el-form-item label="角色类型" prop="type" required>
                    <el-radio v-model="roleForm.type" label="ORG_PUB_R">内置机构</el-radio>
                    <el-radio v-model="roleForm.type" label="ENT_PUB_R">外置机构</el-radio>
                    <el-radio v-model="roleForm.type" label="SYS_R">内置企业</el-radio>
                    <el-radio v-model="roleForm.type" label="FLOW_R">外置企业</el-radio>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="roleForm.remark" type="textarea" :rows="3" placeholder="请填写角色相关的描述" style="width: 400px;" :maxlength="50" :disabled="formRead"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="!formRead" type="primary" @click="save()" size="small">保存</el-button>
                    <el-button v-if="!formRead" @click="dialogFormVisible = false" size="small">取消</el-button>
                    <el-button v-if="formRead" @click="dialogFormVisible = false" size="small">返回</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </template>
</div>
</body>
<script src="./role.js?v=20220927051017944" type="text/javascript"></script>
</html>
